<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>首页</title>
    <link href="element-ui@2.15.14/lib/theme-chalk/index.css" rel="stylesheet">
    <script charset="utf-8" src="js/jquery-1.8.2.js" type="text/javascript"></script>
    <script src="js/vue@2.js"></script>
    <script src="element-ui@2.15.14/lib/index.js"></script>
    <script src="js/util.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
    <el-button onclick="safeExit()" type="warning">安全退出</el-button>
    <h1>详情页面</h1>
    <h1 id="pageInfo"></h1>
    <div class="demo-image__preview">
        <image id="photo" src="imgUrl" style="width: 100px; height: 100px"/>
    </div>
    <br/>
    <div id="container">
        <el-link href="resetPassword.html" type="primary">修改密码</el-link>
        <el-link href="updateStuInfo.html" id="toUpdateStuBtn" style="display: none" type="primary">修改信息</el-link>
        <el-link href="updateTeaInfo.html" id="toUpdateTeaBtn" style="display: none" type="primary">修改信息</el-link>
        <el-link href="stuList.html" id="toStuListBtn" style="display: none" type="primary">学生管理</el-link>
        <el-link href="teaList.html" id="toTeaListBtn" style="display: none" type="primary">老师管理</el-link>
        <el-link href="courseList.html" id="toCourseListBtn" style="display: none" type="primary">课程管理</el-link>
    </div>
</div>
<script type="text/javascript">
    function safeExit() {
        localStorage.removeItem("user")
        window.location = "login.html";
    }

    const app = new Vue({
        el: '#app'
        , data: {
            // imgUrl: 'tx.jpg'
        }
    });
    if (!isLogin()) {
        app.$message.error("您没有登录")
        setTimeout(() => {
            location.href = 'login.html'
        }, 500)
    }
    let user = JSON.parse(localStorage.getItem("user"));
    let role = user.role;
    let name = user.name;
    let photo = user.photo;
    $("#photo").attr("src", photo);
    if (role == "student") {
        $("#pageInfo").text("欢迎" + name + "学生进入到学生管理系统");
        $("#toUpdateStuBtn").show();
    } else if (role == "teacher") {
        $("#toUpdateTeaBtn").show();
        $("#toStuListBtn").show();
        $("#pageInfo").text("欢迎" + name + "老师进入到学生管理系统");
    } else if (role == "admin") {
        $("#pageInfo").text("欢迎" + name + "管理员进入到学生管理系统");
        $("#toStuListBtn").show();
        $("#toTeaListBtn").show();
        $("#toCourseListBtn").show();
        $("#photo").attr("src", "tx.jpg");
    }
</script>
</body>
</html>
